﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="robots" content="all" />
<meta name="author" content="msleft" />
<meta name="Copyright" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<title></title>
<link rel="Shortcut Icon" href="images/en/favicon.ico" type="image/x-icon" />
<link rel="Bookmark" href="/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script type="text/javascript" src="js/jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript">
	var valiated_email = function(value) {
		// contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/
		return /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i.test(value);
	};
		
	jQuery(function(){
		var productInfo = {"id" : parent.$("input[@name='id']").val(), "colour" : parent.$("input[@name='colour']").val(), "id_size" : parent.$("input[@name='id_size']").val()};
		jQuery("input[@name='id_catalog']").val(productInfo.id);
		jQuery("input[@name='colour']").val(productInfo.colour);
		jQuery("input[@name='id_size']").val(productInfo.id_size);
		var validationIndex = 0;
		var container = $('div.error_container');
		var v = jQuery("form[@name='tell_friend_form']").validate({
			errorContainer: container,
			submitHandler: function(form) {
				
				if (validationIndex < 1)
				{	
					var is_validated = true;
					var is_validated_email = true;
					// validate friend email.
					if (jQuery("input[@name='friends_email']").val().indexOf(',') > -1)
					{
						var arrEmails = jQuery("input[@name='friends_email']").val().replace(' ', '').split(',');
						
						for (var strEmail in arrEmails)
						{
							if (!valiated_email(arrEmails[strEmail]))
								is_validated_email = false;
						}
						
					}
					else
					{
						if (!valiated_email(jQuery("input[@name='friends_email']").val()))
							is_validated_email = false;
					}
					
					if (!is_validated_email)
					{
						jQuery("div.error_container").show();
						jQuery("div.error_container").find("label[@for='friends_email']").show();
					}
					
					// validated the subject
					if (parseInt(jQuery("input[@name='yr_subject'][@checked]").val()) == 3)
					{
						if (jQuery("textarea[@name='cus_mes']").val() == "")
						{
							is_validated = false;
							jQuery("div.error_container").show();
							jQuery("div.error_container").find("label[@for='cus_mes']").show();
						}
						else
						{
							is_validated = true;
							jQuery("div.error_container").hide();
							jQuery("div.error_container").find("label[@for='cus_mes']").hide();
						}
					}
					
					if (jQuery("input[@name='yr_name']").val() == 'Your name')
					{
						is_validated = false;
						jQuery("div.error_container").show();
						jQuery("#tell_from_name").show();
					}
					else
					{
						is_validated = true;
						jQuery("div.error_container").hide();
						jQuery("#tell_from_name").hide();
					}
					
					is_validated = (is_validated_email && is_validated) ? true : false;
					
					if (is_validated)
					{
						/*parent.jQuery("#fancy_overlay").hide();
						parent.jQuery("#fancy_outer").hide();
						parent.jQuery("#fancy_close").hide();
						parent.jQuery("#fancy_title").hide();*/
					}
					
					return is_validated;
				}
				
				validationIndex++;
			}
		});
		
		jQuery("input[@name='btn_submit']").click(function(){
			
			if ($.trim(jQuery("input[@name='yr_name']").val()) == "Your name")
				jQuery("input[@name='yr_name']").val('');
			
			if ($.trim(jQuery("input[@name='yr_email']").val()) == "Your email address")
				jQuery("input[@name='yr_email']").val('');
			
			if ($.trim(jQuery("input[@name='friends_email']").val()) == "Friend's email addresses separated by commas")
				jQuery("input[@name='friends_email']").val('');
			
			return true;
		});
	});
</script>
<style type="text/css">
body {background:transparent;}
#tellfriend .msg_wrap div.error_container label.error
{
	display:none;
}
</style>
</head>
<body>
<div id="tellfriend">
	<div class="msg_wrap">
		<a class="close">Close</a>
		<div class="tellfriend_form">
			<h1>Tell Friend</h1>
			<form  method="post" action="sendmail.php" name="tell_friend_form">
				<div class="error_container">
					<label for="yr_name" class="error" id="tell_from_name">Please input your name.<br /></label>
					<label for="yr_email" class="error" id="tell_from">Please input your email address.<br /></label>
					<label for="friends_email" class="error" id="tell_to">Please input valiated friends' email.<br /></label>
					<label for="yr_subject" class="error" id="tell_subject">Please select a subject.<br /></label>
					<label for="cus_mes" class="error" id="tell_message">Please input your custom message.<br /></label>
				</div>
				<div>
					<label>FROM</label>
					<input type="text" name="yr_name" value="Your name" onfocus="if (this.value == 'Your name') {this.value = '';}" onblur="if (this.value == ''){this.value = 'Your name'; }" class="ce_text from required" />					
				</div>
				<div>
					<label>&nbsp;</label>
					<input type="text" name="yr_email" value="Your email address" onfocus="if (this.value == 'Your email address') {this.value = '';}" onblur="if (this.value == ''){this.value = 'Your email address'; }" class="ce_text from required email" />
				</div>
				<div>
					<label>TO</label>
					<input type="text" name="friends_email" value="Friend's email addresses separated by commas" onfocus="if (this.value == 'Friend\'s email addresses separated by commas') {this.value = '';}" onblur="if (this.value == ''){this.value = 'Friend\'s email addresses separated by commas'; }" class="ce_text to required" />
				</div>
				<div class="message">
					<label>MESSAGE</label>
					<div class="area">
						<p><input type="radio" name="yr_subject" value="1" class="radio required" /> Found this on DAFT - check it out! </p>
						<p><input type="radio" name="yr_subject" value="2" class="radio" /> Cool stuff!</p>
						<p><input type="radio" name="yr_subject" value="3" class="radio" /> Or customize your message below:</p>
						<textarea name="cus_mes"></textarea>
						<!--<p class="explain"><input type="checkbox" name="invit_gift" value="1" class="checkbox" />Also send invitation to join and get 20RMB credits when each of your friend's first purchase with DAFT is shipped!</p>-->
					</div>
				</div>
				<input type="hidden" name="SUBMITFORM" value="tell_friend" />
				<input type="hidden" name="id_catalog" value="" />
				<input type="hidden" name="colour" value="" />
				<input type="hidden" name="id_size" value="" />
				<input type="checkbox" class="sendcopy" name="send_copy" value="Send me a copy" />Send me a copy
				<p class="submits"><input type="submit" name="btn_submit" value="SUBMIT" class="submit" /></p>
			</form>
		</div> <!-- tellfriend_form end -->

		<p class="note">* Your data are safe with DAFT. Please consult our <a href="privacy-policy.html" onclick="javascript:parent.location.href='privacy-policy.html';return false;" title="">Privacy Policy</a> for further information..</p>

	</div> <!-- msg_wrap end -->
</div><!-- feedback end -->

<script type="text/javascript">
$(function() {

// feedback  
$("#tellfriend .close").click( 
	function (){ $("#tellfriend").addClass("none") }
); 

});
</script>
</body>
</html>


